<template>
    <div class="chat-group">
        <Panel>
            <template v-slot:header-slot>
                {{groupname}}
            </template>
            <template v-slot:body-slot>
                <MsgContentGroup></MsgContentGroup>
                <ToolBar></ToolBar>
                <InputArea></InputArea>
            </template>
            <template v-slot:footer-slot>
                <button class="btn-send">发送(Enter)</button>
            </template>
        </Panel>
    </div>
</template>

<script>
import Panel from '../common/panel'
import MsgContentGroup from './msg-content-group'
import ToolBar from './toolbar'
import InputArea from './input-area'
export default {
  data: () => {
    return {
      groupname: '群名称'
    }
  },
  components: {
    Panel,
    MsgContentGroup,
    ToolBar,
    InputArea
  }
}
</script>

<style>
.chat-group{
    width: 100%;
    height: 100%;
}
.left-aside{
    float: left;
    height: 100%;
    width: 80px;
}
.right-aside{
    float: right;
    height: 100%;
    width: 80px;
}
.btn-send{
    float: right;
    width: 80px;
    height: 30px;
    margin-right: 25px;
    margin-top: 5px;
    border-radius: 5px;
}
</style>
